<!---
  @author: andy
  @description: 后台管理系统的布局组件
-->
<template>
  <me-watermark :text="config.app.watermarkText" :visible="config.app.watermark" class="watermark-box">
    <div class="admin-layout">
    <div class="admin-layout-inner">
      <div class="sidebar-placeholder" v-if="showPlaceholder" :style="{width : `${sidebarWidth}px`}"></div>
      <LayoutSidebar v-if="(config.app.layout === 'mixed-nav' ? accessStore.mixedSidebarMenus.length > 0 : configStore.showSidebar) && config.sidebar.enable" @collapse="onCollapse" />
      <div class="admin-container">
        <div class="admin-container-inner">
          <div :style="configStore.topStyle">
            <LayoutHeader v-if="config.header.enable">
              <template #logo v-if="!configStore.showSidebarLogo">
                <Logo />
              </template>
              <template #breadcrumb v-if="configStore.showBreadcrumb">
                <Breadcrumb :show-icon="config.breadcrumb.showIcon" />
              </template>
              <template v-if="configStore.showSidebar">
                <MixedHeader v-if="configStore.config.app.layout === 'mixed-nav'" />
                <div class="other-header">
                  <IconButton @click="onClick">
                    <SettingOutlined class="icon" />
                  </IconButton>
                  <a-drawer
                    v-model:visible="showDrawer"
                    :closable="false"
                    title="偏好设置"
                  >
                    <SettingPanel />
                  </a-drawer>
                </div>
              </template>
              <HeaderSidebar v-if="!configStore.showSidebar">
                <div>这里是插槽，写头部其他东西</div>
              </HeaderSidebar>
            </LayoutHeader>
            <MixedSecondMenu 
              v-if="config.secondMenu.enable && config.app.layout === 'mixed-nav' && accessStore.secondMenus.length > 0"
            />
            <LayoutTabbar 
              v-if="config.tabbar.enable"
              :sidebar-width="sidebarWidth" 
              @reload="onReload"
              @toggle-fullscreen="onToggleFullscreen"
            />
          </div>
          <LayoutContent :sidebar-width="sidebarWidth">
            <router-view v-slot="{ Component }" v-if="isReload">
              <transition :name="config.transition.name" appear>
                <KeepAlive :include="accessStore.keepAlivePages">
                  <component :is="Component" />
                </KeepAlive>
              </transition>
            </router-view>
          </LayoutContent>
        </div>
      </div>
    </div>
  </div>
  </me-watermark>
  
</template>
<script lang='ts' setup>
import LayoutSidebar from './LayoutSidebar.vue';
import LayoutHeader from './LayoutHeader.vue';
import LayoutContent from './LayoutContent.vue';
import MixedSecondMenu from './MixedSecondMenu.vue';
import Breadcrumb from './BreadCrumb.vue';
import { useConfigStore } from '@/stores/configs/config';
import { SettingOutlined } from '@ant-design/icons-vue';
import IconButton from './IconButton.vue';
import SettingPanel from './setting/SettingPanel.vue';
import { storeToRefs } from 'pinia';
import LayoutTabbar from './LayoutTabbar.vue';
import HeaderSidebar from './HeaderSidebar.vue';
import Logo from './Logo.vue';
import MixedHeader from './MixedHeader.vue';
import { computed, nextTick, ref, watchEffect } from 'vue';
import { useAccessStore } from '@/stores/access/access';
const accessStore = useAccessStore();
const configStore = useConfigStore();
const { config } = storeToRefs(configStore);
const isReload = ref(true);
const showDrawer = ref(false);
const sidebarWidth = ref(configStore.isFullscreen ? 0 : configStore.isCollapsed ? 80 : config.value.sidebar.width);
const onCollapse = (width: number) => {
  sidebarWidth.value = width;
}
watchEffect(() => {
  if (!config.value.sidebar.enable) {
    sidebarWidth.value = 0;
  } else {
    sidebarWidth.value = configStore.isFullscreen ? 0 : configStore.isCollapsed ? 80 : config.value.sidebar.width;
  }
});
const showPlaceholder = computed(() => {
  return (config.value.app.layout === 'mixed-nav' ? accessStore.mixedSidebarMenus.length > 0 : configStore.showSidebarPlaceholder) && config.value.sidebar.enable;
});
const onReload = () => {
  isReload.value = false;
  nextTick(() => {
    isReload.value = true;
  })
}
const onToggleFullscreen = (isFullscreen: boolean) => {
  configStore.updateConfig({
    sidebar : {
      hidden : isFullscreen
    },
    header : {
      hidden : isFullscreen
    }
  });
  sidebarWidth.value = isFullscreen ? 0 : config.value.sidebar.collapsed ? 80 : config.value.sidebar.width;
}
const onClick = () => {
  showDrawer.value = !showDrawer.value;
}
</script>
<style lang='less' scoped>
.watermark-box {
  height: 100%;
}
.admin-layout {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  .admin-layout-inner {
    display: flex;
    height: 100%;
    .sidebar-placeholder {
      height: 0;
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
    .admin-container {
      flex: 1;
      overflow: hidden;
      .admin-container-inner {
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: column;
        .slide-enter-active , .slide-leave-active {
          transition: all 0.2s;
          position: absolute;
        }
        .slide-enter-from {
          opacity: 0;
          transform: translateX(-100px);
        }
        .slide-leave-to {
          opacity: 0;
          transform: translateX(100px);
        }
        .fade-enter-active , .fade-leave-active {
          transition: all 0.2s;
          position: absolute;
        }
        .fade-enter-from , .fade-leave-to {
          opacity: 0;
        }
        .scale-enter-active , .scale-leave-active {
          transition: all 0.2s;
          position: absolute;
        }
        .scale-enter-from , .scale-leave-to {
          opacity: 0;
          transform: scale(0.9);
        }
        .other-header {
          flex: 1;
          display: flex;
          justify-content: flex-end;
          .icon {
            font-size: var(--font-size-base);
          }
        }
      }
    }
  }
}
</style>